<template>
    <canvas id="color-palette" canvas-id="color-palette" class="color-palette" :style="[canvasStyle]"></canvas>
</template>

<script>
import ColorAnalysis from './color-analysis.js';
export default {
    name: 'ColorAnalysis',
    props: {
        url: {
            type: String,
            required: true
        },
        maxColors: {
            type: [Number,String],
            default: 5
        }
    },
    data() {
        return {
            winWidth: 375,
            canvasWidth: 200,
            canvasHeight: 200,
            colorAnalysis: null,
        };
    },
    computed: {
        canvasStyle() {
            const style = {};
            style.width = this.canvasWidth + 'px';
            style.height = this.canvasHeight + 'px';
            return style;
        }
    },
    mounted() {
        this.handleInit();
    },
    methods: {
        colors(callback = () => {}){
            uni.getImageInfo({
            	src: this.url,
            	success: imgInfo => {
            		let { width, height } = imgInfo;
            		let scale = (0.6 * this.winWidth) / Math.max(width, height);
            		let canvasWidth = Math.floor(scale * width);
            		let canvasHeight = Math.floor(scale * height);
            		this.canvasWidth = canvasWidth;
            		this.canvasHeight = canvasHeight;
            		this.colorAnalysis.getPalette(
            			{
            				width: canvasWidth,
            				height: canvasHeight,
            				imgPath: imgInfo.path,
            				maxColors: this.maxColors,
            				step: 1
            			},
            			colorArr => {
            				if (colorArr) {
            					let rbgColors = [];
            					colorArr = colorArr.map(color => {
            						rbgColors.push(`${color[0]},${color[1]},${color[2]}`);
            						return this.rgbToHex(color[0], color[1], color[2]);
            					});
                                callback(colorArr)
            				}
            			},
                        this
            		);
            	}
            });
        },
        // RGB转16进制颜色
        rgbToHex(r, g, b) {
            return "#" + this.toHex(r) + this.toHex(g) + this.toHex(b)
        },
        toHex(n) {
            n = parseInt(n, 10);
            if (isNaN(n)) return "00";
            n = Math.max(0, Math.min(n, 255));
            return "0123456789ABCDEF".charAt((n - n % 16) / 16) +
                "0123456789ABCDEF".charAt(n % 16);
        },
        // 初始化
        handleInit(){
            this.$nextTick(() => {
               this.colorAnalysis = new ColorAnalysis('color-palette');
               this.colors((colorArr) => {
                   this.$emit('finish',colorArr)
               });
               this.winWidth = uni.getSystemInfoSync().windowWidth;
            });
        }
    }
};
</script>

<style scoped lang="scss">
.color-palette {
    top: -2000px;
    left: -2000px;
    z-index: 10;
    position: fixed;
    pointer-events: none;
}
</style>
